<template>
  <Card dis-hover :bordered="false">
    <Row class="ivu-mb-16">
      <Col :span="22">
        <Input
          placeholder="请输入项目名称，e看牙项目ID"
          v-width="220"
          v-model="params.keywords"
          @on-clear="searchData"
          @on-enter="searchData"
          clearable
          v-if="currentTab !== 'content'"
        />
      </Col>
      <Col :span="2" class="ivu-text-right" v-if="type == 'content'">
        <Button type="primary" @click="handleAdd" v-hasC="btnAdd">新增</Button>
      </Col>
      <Col :span="2" class="ivu-text-right" v-else>
        <Button type="primary" @click="handleAdd" v-hasC="btnAdd1">新增</Button>
      </Col>
    </Row>

    <Table
      :columns="columns"
      :data="list"
      :loading="loading"
      :max-height="tableHeigth"
    >
      <template #status_name="{ row }">
        <Badge
          status="success"
          :text="row.status_name"
          v-if="row.status_name === '正常'"
        />
        <Badge status="error" :text="row.status_name" v-else />
      </template>
      <template #action="{ row }">
        <a @click="handleEdit(row)" v-hasC="btnPermission.edit">编辑</a>
        <Divider type="vertical" v-hasC="btnPermission.del" />
        <a @click="handleDel(row.id)" class="del" v-hasC="btnPermission.del"
          >删除</a
        >
      </template>
    </Table>
    <Page
      class="ivu-mt-16"
      :total="total"
      :modelValue="params.current"
      :page-size="params.size"
      :page-size-opts="pageOpts"
      show-total
      show-sizer
      @on-change="changePage"
      @on-page-size-change="changepageSize"
    />
    <Modal
      :mask-closable="false"
      v-model="addModal"
      :title="edit ? '新增' : '编辑'"
      :footer-hide="true"
      :draggable="true"
    >
      <Form ref="create" :model="basicSetInfo" :rules="rules" :label-width="80">
        <FormItem label="名称" prop="name" required>
          <Input
            v-model="basicSetInfo.name"
            placeholder="请输入名称"
            :maxlength="30"
          />
        </FormItem>
        <FormItem
          label="项目名称"
          prop="tag_id"
          v-if="currentTab == 'accounts'"
          required
        >
          <Select
            placeholder="项目名称"
            v-model="basicSetInfo.tag_id"
            :filterable="projectList.length >= 10"
            @on-open-change="showAll"
            clearable
          >
            <Option
              v-for="item in projectList"
              :value="item.value"
              :key="item.value"
              >{{ item.title }}</Option
            >
          </Select>
        </FormItem>
        <FormItem label="排序" prop="sort">
          <InputNumber
            v-model="basicSetInfo.sort"
            placeholder="排序"
            :min="0"
          />
        </FormItem>
        <FormItem
          label="渠道"
          prop="channel_id"
          v-if="currentTab == 'content'"
          required
        >
          <!-- <TreeSelect v-model="basicSetInfo.channel_id" :data="channelList" /> -->
          <Cascader
            v-model="basicSetInfo.channel_id"
            change-on-select
            :data="channelList"
            filterable
            @on-visible-change="checkChannel"
          />
        </FormItem>
        <FormItem label="状态" prop="status">
          <Switch v-model="basicSetInfo.status" />
        </FormItem>
      </Form>
      <div slot="footer" style="text-align: right">
        <Button type="default" @click="addModal = false">取消</Button>
        <Button
          type="primary"
          @click="ok"
          style="margin-left: 10px"
          :loading="btnLoading"
          >确定</Button
        >
      </div>
    </Modal>
  </Card>
</template>
<script>
import {
  patientTypeList,
  updatePatientType,
  deletePatientType,
  treatmentProjectList,
  updateTreatmentProject,
  deleteTreatmentProject,
} from "@api/basicset.js";
export default {
  name: "set-content",
  props: ["type", "currentTab"],
  data() {
    return {
      tableHeigth: document.body.clientHeight - 270,
      btnPermission: {
        edit: {
          name: "v1-patient-patient-type-update-patient-type2",
          flag: "v1/patient/patient-type/update-patient-type",
        },
        del: {
          name: "v1-patient-patient-type-delete-patient-type",
          flag: "v1/patient/patient-type/delete-patient-type",
        },
      },
      btnAdd: {
        name: "v1-patient-patient-type-update-patient-type",
        flag: "v1/patient/patient-type/update-patient-type",
      },
      btnAdd1: {
        name: "v1-base-treatment-project-update-treatment-project",
        flag: "v1/base/treatment-project/update-treatment-project",
      },
      addModal: false,
      edit: true,
      loading: false,
      btnLoading: false,
      params: { keywords: "", current: 1, size: 10 },
      total: 0,
      pageOpts: [10, 20, 30, 40],
      columns: [
        {
          key: "name",
          title: "名称",
        },
        {
          key: "sort",
          title: "排序",
        },
        {
          slot: "status_name",
          title: "状态",
        },
        {
          slot: "action",
          title: "操作",
          width: 110,
        },
      ],
      list: [],
      channelList: [],
      projectList: [],
      basicSetInfo: {
        id: "",
        type: "",
        name: "",
        sort: 100,
        channel_id: [],
        tag_id: "",
        status: true,
      },
      rules: {
        name: [{ required: true, message: "请输入名称" }],
        channel_id: [{ required: true, message: "请选择渠道" }],
        tag_id: [{ required: true, message: "请选择项目" }],
      },
    };
  },
  mounted() {
    this.showcolumns();
  },
  watch: {
    currentTab() {
      this.showcolumns();
    },
  },
  methods: {
    showcolumns() {
      if (this.currentTab == "content") {
        this.columns = [
          {
            key: "name",
            title: "名称",
          },
          {
            key: "source_name",
            title: "渠道",
          },
          {
            key: "sort",
            title: "排序",
          },
          {
            slot: "status_name",
            title: "状态",
          },
          {
            slot: "action",
            title: "操作",
            width: 110,
          },
        ];
        this.btnPermission = {
          edit: {
            name: "v1-patient-patient-type-update-patient-type2",
            flag: "v1/patient/patient-type/update-patient-type",
          },
          del: {
            name: "v1-patient-patient-type-delete-patient-type",
            flag: "v1/patient/patient-type/delete-patient-type",
          },
        };
      } else {
        this.columns = [
          {
            key: "name",
            title: "名称",
          },
          {
            key: "tag_name",
            title: "E看牙项目名称 ",
          },
          {
            key: "sort",
            title: "排序",
          },
          {
            slot: "status_name",
            title: "状态",
          },
          {
            slot: "action",
            title: "操作",
            width: 110,
          },
        ];
        this.btnPermission = {
          edit: {
            name: "v1-base-treatment-project-update-treatment-project2",
            flag: "v1/base/treatment-project/update-treatment-project",
          },
          del: {
            name: "v1-base-treatment-project-delete-treatment-project",
            flag: "v1/base/treatment-project/delete-treatment-project",
          },
        };
      }
    },
    showAll(e) {
      if (e) {
        let downList = document.querySelectorAll(
          ".ivu-select-dropdown-list .ivu-select-item"
        );
        downList.forEach((item) => {
          item.style.display = "block";
        });
      }
    },
    //切换page
    changePage(index) {
      this.params.current = index;
      this.getData(this.currentTab);
    },
    changepageSize(val) {
      this.params.size = val;
      this.getData(this.currentTab);
    },
    handleDel(index) {
      this.$Modal.confirm({
        title: "删除提示",
        content: "是否确认删除此条记录，删除后不可恢复",
        onOk: () => {
          if (this.currentTab == "content") {
            deletePatientType({ id: index }).then(() => {
              this.$Message.success("删除成功");
              this.getData(this.currentTab);
            });
          } else {
            deleteTreatmentProject({ id: index }).then(() => {
              this.$Message.success("删除成功");
              this.getData(this.currentTab);
            });
          }
        },
      });
    },
    handleAdd() {
      this.basicSetInfo = {
        id: "",
        name: "",
        tag_id: "",
        channel_id: [],
        sort: 100,
        status: true,
      };
      this.addModal = true;
      this.edit = true;
      this.$refs.create.resetFields();
    },
    handleEdit(info) {
      this.addModal = true;
      this.edit = false;
      this.basicSetInfo = {
        id: info.id,
        tag_id: info.tag_id,
        channel_id: info.channel_arr,
        name: info.name,
        sort: parseInt(info.sort),
        status: info.status == 1 ? true : false,
      };
    },
    checkChannel() {
      if (this.basicSetInfo.channel_id.length == 1) {
        this.basicSetInfo.channel_id = [];
      }
    },
    changeData(data) {
      data.forEach((item) => {
        item.value = item.id;
        item.label = item.source_name;
        item.expand = true;
        // if(item.pid==0){
        //     item.disabled=true
        // }
        if (item.children.length > 0) {
          this.changeData(item.children);
        }
      });
      return data;
    },
    getData(type) {
      this.loading = true;
      if (type == "content") {
        const params = {
          pageSize: this.params.size,
          page: this.params.current,
        };
        patientTypeList(params)
          .then((res) => {
            this.channelList = this.changeData(res.condition);
            this.list = res.list.list;
            this.total = res.list.total;
            this.loading = false;
          })
          .finally(() => {
            this.loading = false;
          });
      } else {
        const params = {
          pageSize: this.params.size,
          page: this.params.current,
          keywords: this.params.keywords,
        };
        treatmentProjectList(params)
          .then((res) => {
            this.projectList = res.condition;
            this.list = res.list.list;
            this.total = res.list.total;
            this.loading = false;
          })
          .finally(() => {
            this.loading = false;
          });
      }
    },
    searchData() {
      this.params.current = 1;
      this.getData(this.currentTab);
    },
    addBasicSet() {
      this.btnLoading = true;
      let params = {};
      if (this.currentTab == "content") {
        if (this.edit) {
          params = {
            name: this.basicSetInfo.name,
            sort: this.basicSetInfo.sort,
            channel_id: this.basicSetInfo.channel_id.pop(),
            status: this.basicSetInfo.status ? 1 : 0,
          };
        } else {
          params = {
            id: this.basicSetInfo.id,
            name: this.basicSetInfo.name,
            sort: this.basicSetInfo.sort,
            channel_id: this.basicSetInfo.channel_id.pop(),
            status: this.basicSetInfo.status ? 1 : 0,
          };
        }
        updatePatientType(params)
          .then((res) => {
            this.$Message.success("保存成功");
            this.addModal = false;
            this.btnLoading = false;
            this.params.current = 1;
            this.getData(this.currentTab);
          })
          .catch(() => {
            this.btnLoading = false;
          });
      } else {
        if (this.edit) {
          params = {
            name: this.basicSetInfo.name,
            sort: this.basicSetInfo.sort,
            tag_id: this.basicSetInfo.tag_id,
            status: this.basicSetInfo.status ? 1 : 0,
          };
        } else {
          params = {
            id: this.basicSetInfo.id,
            name: this.basicSetInfo.name,
            sort: this.basicSetInfo.sort,
            tag_id: this.basicSetInfo.tag_id,
            status: this.basicSetInfo.status ? 1 : 0,
          };
        }
        updateTreatmentProject(params)
          .then((res) => {
            this.$Message.success("保存成功");
            this.addModal = false;
            this.btnLoading = false;
            this.getData(this.currentTab);
          })
          .catch(() => {
            this.btnLoading = false;
          });
      }
    },
    ok() {
      this.$refs.create.validate((valid) => {
        if (valid) {
          this.addBasicSet();
        } else {
          this.addModal = true;
          return;
        }
      });
    },
  },
};
</script>
